
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Language" content="en" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery Minimal Vertical splitter</title>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>

    <link rel="stylesheet" href="http://files.cnblogs.com/rubylouvre/bootstrap.css"/>
    <style type="text/css" media="all">
        .simple {
            height: 200px;
            width: 500px;
            border: 0px solid #aaa;
        }
        .simple div {
            overflow: auto;
        }
        .vsplitbar {
            width: 5px;
            background: #cab;
        }
    </style>
    <script type="text/javascript">



        (function ($) {

            "use strict"; // jshint ;_;


            /* AFFIX CLASS DEFINITION
             * ====================== */

            var Affix = function (element, options) {
                this.options = $.extend({}, $.fn.affix.defaults, options)
                this.$window = $(window)//只要是绑定事件
                        .on('scroll.affix.data-api', $.proxy(this.checkPosition, this))
                        .on('click.affix.data-api',  $.proxy(function () {
                            setTimeout($.proxy(this.checkPosition, this), 1)
                        }, this))//当我们移动或点击时自动进行修正
                this.$element = $(element)
                this.checkPosition()
            }

            Affix.prototype.checkPosition = function () {
                if (!this.$element.is(':visible')) return

                var scrollHeight = $(document).height()
                        , scrollTop = this.$window.scrollTop()
                        , position = this.$element.offset()
                        , offset = this.options.offset
                        , offsetBottom = offset.bottom
                        , offsetTop = offset.top
                        , reset = 'affix affix-top affix-bottom'
                        , affix

                if (typeof offset != 'object') offsetBottom = offsetTop = offset
                if (typeof offsetTop == 'function') offsetTop = offset.top()
                if (typeof offsetBottom == 'function') offsetBottom = offset.bottom()
                //比较当前元素到顶部的距离与window.pageYOffset的差
                //通过affix-top affix-bottom这两个类名移除固定效果
                affix = this.unpin != null && (scrollTop + this.unpin <= position.top) ?
                        false    : offsetBottom != null && (position.top + this.$element.height() >= scrollHeight - offsetBottom) ?
                        'bottom' : offsetTop != null && scrollTop <= offsetTop ?
                        'top'    : false

                if (this.affixed === affix) return

                this.affixed = affix
                this.unpin = affix == 'bottom' ? position.top - scrollTop : null

                this.$element.removeClass(reset).addClass('affix' + (affix ? '-' + affix : ''))
            }


            /* AFFIX PLUGIN DEFINITION
             * ======================= */

            var old = $.fn.affix

            $.fn.affix = function (option) {
                return this.each(function () {
                    var $this = $(this)
                            , data = $this.data('affix')
                            , options = typeof option == 'object' && option
                    if (!data) $this.data('affix', (data = new Affix(this, options)))
                    if (typeof option == 'string') data[option]()//这里是无效的,因为它只有一个checkPosition方法,而这方法会自动调用
                })
            }

            $.fn.affix.Constructor = Affix

            $.fn.affix.defaults = {
                offset: 0
            }


            /* AFFIX NO CONFLICT
             * ================= */

            $.fn.affix.noConflict = function () {
                $.fn.affix = old
                return this
            }

            /* AFFIX DATA-API
             * ============== */




        })(window.jQuery);

        $().ready(function() {
            $('[data-spy="affix"]').affix({
                offsetTop:40

            })
        });
    </script>
</head>
<body>

<h1>Edit Document Template</h1>
<hr/>

<div class="row-fluid">
    <div class="span3">
        <ul class="nav nav-list" data-spy="affix" data-offset-top="40">
            <li><a href="#one"><i class="icon-chevron-right"></i> One</a></li>
            <li><a href="#two"><i class="icon-chevron-right"></i> Two</a></li>
            <li><a href="#three"><i class="icon-chevron-right"></i> Three</a></li>
            <li><a href="#four"><i class="icon-chevron-right"></i> Four</a></li>
            <li><a href="#five"><i class="icon-chevron-right"></i> Five</a></li>
            <li><a href="#six"><i class="icon-chevron-right"></i> Six</a></li>
            <li><a href="#seven"><i class="icon-chevron-right"></i> Seven</a></li>
        </ul>

    </div>
    <div class="span9">
        <fieldset id="one">
            <legend>one</legend>
            <div class="fieldset-content">
                <p>
                    "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt     explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
                    voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut
                    labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
                    consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eumfugiat quovoluptas nulla pariatur?"
                </p>
            </div>
        </fieldset>

        <fieldset id="two">
            <legend>Two</legend>
            <div class="fieldset-content">
                <p>
                    "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt     explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
                    voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut
                    labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
                    consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eumfugiat quovoluptas nulla pariatur?"
                </p>
            </div>
        </fieldset>

        <fieldset id="three">
            <legend>three</legend>
            <div class="fieldset-content">
                <p>
                    "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt     explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
                    voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut
                    labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
                    consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eumfugiat quovoluptas nulla pariatur?"
                </p>
            </div>
        </fieldset>

        <fieldset id="four">
            <legend>four</legend>
            <div class="fieldset-content">
                <p>
                    "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt     explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
                    voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut
                    labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
                    consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eumfugiat quovoluptas nulla pariatur?"
                </p>
            </div>
        </fieldset>

        <fieldset id="five">
            <legend>five</legend>
            <div class="fieldset-content">
                <p>
                    "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt     explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
                    voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut
                    labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
                    consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eumfugiat quovoluptas nulla pariatur?"
                </p>
            </div>
        </fieldset>

        <fieldset id="six">
            <legend>six</legend>
            <div class="fieldset-content">
                <p>
                    "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt     explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
                    voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut
                    labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
                    consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eumfugiat quovoluptas nulla pariatur?"
                </p>
            </div>
        </fieldset>

        <fieldset id="seven">
            <legend>seven</legend>
            <div class="fieldset-content">
                <p>
                    "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                    architecto beatae vitae dicta sunt     explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
                    voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut
                    labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
                    consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eumfugiat quovoluptas nulla pariatur?"
                </p>
            </div>
        </fieldset>
    </div>
</div>​
</body>
</html>
